


import React, { Component, PropTypes } from 'react';

import Paper from 'material-ui/Paper';
import AppBar from 'material-ui/AppBar';
import RaisedButton from 'material-ui/RaisedButton';
import IconButton from 'material-ui/IconButton';
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';

import styles from './index.css';

const Scroll = (props, { router }) => {


  return (
    <Paper>
      <AppBar
        title="Scroll"
        iconElementLeft={<IconButton onTouchTap={()=>{router.goBack()}}><NavigationArrowBack /></IconButton>}
      />
      <h2>Scroll</h2>
      <p>测试内容：</p>
      <p>1、返回，上级页面预览位置是否保持</p>
      <p>2、内容是否 "缓存" (先从本地读取，再拉去服务器 "可以断网测试")</p>
      <br />

      <h2>结论</h2>
      <p>1、Scroll 位于 body 返回会保持，内置于 div 等其他元素不会。</p>
      <p>2、Scroll 不保持，不代表浏览器不做缓存。</p>
      <p>3、前进后退，都会先显示缓存的数据 <strong>同时也会发送请求，来更新数据</strong>(决绝方法，cookie 记录决定是否再次发起请求)</p>

      <h2>首次进入、前进、后退</h2>
      <p>一开始都会有误区，经过几次测试得出：都会按首次进入方式执行，组件也会重新</p>
    </Paper>
  );

};

Scroll.contextTypes = {
  router: PropTypes.object,
}

export default Scroll;

